<template>
	<section>
		<!-- <div :class="type == '-3' ? 'lottery' : 'hlep'"> -->
		<div class="lottery">
			<div class="list ml30rem mr30rem" v-infinite-scroll="loadData" infinite-scroll-disabled="loading" infinite-scroll-distance="10" v-if="flag">
				<div class="type">
					<ul v-if="activity == 1">
						<li class="layout-juscon pt30rem pb30rem" v-for="item in data" @click="jumpDetail(item)">
							<img class="list-left" :src="img_url + item.pic_cover_mid" alt="">
							<div class="list-mid flex_1 layout-juscon flex-column ml30rem">
								<p class="ellipsis-more fs30rem">{{ item.goods_name }}</p>
								<div class="list-mid-pirce fs34rem flex mt20rem">
									<strong>￥{{ item.price }}</strong><del class="fs24rem flex-center ml30">原价{{ item.market_price }}元</del>
								</div>
								<div class="list-mid-bottom layout-juscon">
									<p class="flex-center fs24rem">已有{{ item.stock }}人获得</p>
									<button class="flex-center fs24rem white pl10rem pr10rem" @click.stop="address(item)">
										分享
									</button>
								</div>
							</div>
						</li>
					</ul>
					<ul v-if="activity == 2 ">
						<li class="layout-juscon pt30rem pb30rem" v-for="item in data" @click="jumpDetail(item)">
							<img class="list-left" :src="img_url + item.picture" alt="">
							<div class="list-mid flex_1 layout-juscon flex-column ml30rem">
								{{ item.goods_name }}
								<div class="list-mid-pirce fs34rem flex mt20rem">
									<strong>￥{{ item.price }}</strong><del class="fs24rem flex-center ml30">原价{{ item.market_price }}元</del>
								</div>
								<div class="list-mid-bottom layout-juscon">
									<p class="flex-center fs24rem">总量{{ item.stock }}份</p>
									<button class="flex-center fs24rem white pl10rem pr10rem" v-if="item.is_end == 0" @click.stop="proceedDetail(item)">
										进行中
									</button>
									<button class="flex-center fs24rem white pl10rem pr10rem" @click.stop="lookDetail(item)" v-if="item.is_end == 1">
										查看详情
									</button>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="placeholder"></div>
			<div class="my-lotterty-box flexcenter" v-show="detailBox">
				<div class="my-lotterty">
					<i class="iconfont icon-guanbi" @click="detailBox = false"></i>
					<div class="status-img">
						<img src="../../../assets/lose.png" v-if="activityDetatil.status ==2" alt="">
						<img src="../../../assets/success.png" v-if="activityDetatil.status ==1" alt="">
					</div>
					<h2 class="fs30rem pb30rem pt30rem">好友详情</h2>
					<ul>
						<li class="layout-juscon ml25rem mr35rem pt25rem pb25rem" v-for="item in activityDetatil.list">
							<img class="list-left" :src=" img_url + item.user_headimg" alt="">
							<div class="list-mid flex_1 layout-juscon flex-column ml30rem">
								<p class="ellipsis fs32rem">{{ item.nick_name }}</p>
								<div class="list-mid-bottom layout-juscon">
									<p class="flex-center fs24rem">{{item.created_at,"yyyy.MM.dd hh:mm"|formatDate}}</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="footer layout">
				<button class="flexcenter w50 fs30rem border-r" :class="{on : activity == 1 }" @click="moreData(1)">
					<p>
						<i class="iconfont icon-iconfonthome fs45rem"></i><span>更多分享</span>
					</p>
				</button>
				<button class="flexcenter flex_1 fs30rem" :class="{on : activity == 2}" @click="loadInitData(2)">
					<p>
						<i class="iconfont icon-wode fs45rem"></i>
						<span>我的分享</span>
					</p>
				</button>
			</div>
		</div>
			<!-- 添加地址 -->
		<popup v-model="popupAddress" style="width:90%;" class="circle-8">
			<div class="coupon">
				<h2 class="fs32rem c333 bold align-center border-b pt40rem pb40rem">确定收货地址</h2>
				<router-link tag="div" :to="'/member/address?type='+ type + '&goodsId=' + goods_id" class="address bg-f5 layout pt20rem pb20rem pl30rem pr30rem" v-if="other_list">
					<div class="flex_1 mr10rem">
						<h3 class="bold fs30rem mb10rem c333">商品收货的地址</h3>
						<p class="fs26rem c666 pt10rem pb10rem" v-if="other_address">{{ other_address.username }} <span class="ml20rem fs26rem c666">{{ other_address.moblie }}</span></p>

						<p class="fs26rem c666" v-if="other_address">{{ other_address.pcd_address }}{{ other_address.address }}</p>

						<p class="fs26rem c666 pt10rem pb10rem" v-for="item in other_list" v-if="!other_address && item.is_default=='1'">{{ item.username }} <span class="ml20rem fs26rem c666">{{ item.moblie }}</span></p>
						<p class="fs26rem c666" v-for="item in other_list" v-if="!other_address && item.is_default=='1'">{{ item.pcd_address }}{{ item.address }}</p>
					</div>
					<i class="iconfont icon-right2"></i>
				</router-link>
				<router-link tag="div" :to="'/member/address?type='+ type + '&goodsId=' + goods_id " class="address bg-f5 layout pt20rem pb20rem pl30rem pr30rem" v-else>
					<h3 class="bold fs30rem mb10rem c333">请添加地址</h3>
					<i class="iconfont icon-right2"></i>
				</router-link>
				<!-- <div class="pl30rem pr30rem pt20rem pb20rem">
					<p class="fs26rem c999" style="line-height:150%;">注:系统将在预购体验结束后24小时公布体验幸运名单，请注意查看</p>
					<p class="fs24rem cxo-red-color" style="line-height:150%;">(每天签到,邀请及分享好友体验,可以提升幸运值,提高体验机会)</p>
				</div> -->
				<div class="border-t layout">
					<button class="pt30rem pb30rem border-r w50" @click="popupAddress = false">取消</button>
					<button class="pt30rem pb30rem w50" @click="ensureShare">确定</button>
				</div>
			</div>
		</popup>
	</section>
</template>

<script>
	import { getActivityList, getMyShare,getFriend } from '@/api/goods-detail';
	import { getAddress } from "@/api/address"; 
	import { InfiniteScroll,MessageBox,Popup } from 'mint-ui';
	import { formatDate } from '@/utils';
	import $toast from '@/utils/toast';
	// import { Lazyload } from 'mint-ui';
	// import Vue from "vue";
	// Vue.use(Lazyload);
	export default{
		components:{
			Popup,
		},
		directives:{
			InfiniteScroll,
			MessageBox
		},
		data()
		{
			return{
				goods_id        : '',
				activity        : 1,
				page_index      : 1,
				page_size       : 10,
				flag            : true,
				loading         : false,
				detailBox       : false,
				popupAddress    : false,
				other_address   : null,
				other_list      : [],
				data            : [],
				activityDetatil : [],
				img_url         : process.env.IMG_URL,
				type            : this.$route.query.type,
				uid             : window.localStorage.getItem('uid'),
			}
		},
		created()
		{
			this.loadAddressData();
		},
		methods:
		{
			loadData()
			{
				this.$store.dispatch("classId", this.type);
				this.loading = true;
				var params = {
					uid        : this.uid,
					type       : this.type,
					page_index : this.page_index++,
					page_size  : this.page_size
				}
				getActivityList(params).then( res => {
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			},
			jumpDetail(item)
			{
				this.$router.push('/detail/activity-detail/' + item.goods_id + '?detailType=3')
			},
			proceedDetail(item)
			{
				this.$router.push('/detail/share-detail?goodsId=' + item.goods_id)
			},
			address(item)
			{
				this.$store.dispatch("goodsId", item.goods_id);
				this.goods_id = item.goods_id;

				if(this.activity == 2)
				{
					this.$store.dispatch("addressId", this.address_id);
					this.$router.push("/detail/share-detail?" + 'goodsId=' + this.goods_id + '&addressId=' + this.address_id);
				}
				else
					if(item.is_tan_address == 1)
						this.popupAddress = true;
					else
						this.$router.push("/detail/share-detail?" + 'goodsId=' + this.goods_id + '&addressId=' + this.address_id);
			},
			loadAddressData()
			{
				if(this.showApp)
					return;

				if(this.$store.state.select_address_data){
					this.popupAddress = true;
					this.other_address = this.$store.state.select_address_data;
					this.$store.dispatch('selectAddress',null)
					return;
				}

				getAddress(this.uid).then( res => {
					this.other_list = res.data;
					for(let i in this.other_list){
						if(this.other_list[i].is_default == 1)
						{
							this.address_id = this.other_list[i].id;
							break;
						}
					}
				});
			},
			ensureShare()
			{
				this.$store.dispatch("addressId", this.address_id);
				this.$router.push("/detail/share-detail?" + 'goodsId=' + this.goods_id + '&addressId=' + this.address_id);
			},
			myShareData()
			{
				this.loading = true;
				var params = {
					type : this.type,
					page : this.page_index++,
					item : this.page_size,
					uid  : this.uid,
				}
				getMyShare(params).then( res => {
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}
					else if (params.page > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.item)
					{
						this.loading = true;
					}
				})
			},
			moreData(Num)
			{
				this.page_index = 1;
				this.data = [];
				this.loading = true;
				this.activity   = Num;
				this.loadData();
			},
			loadInitData(Num)
			{
				this.page_index = 1;
				this.data = [];
				this.loading = true;
				this.activity   = Num;
				this.myShareData();
			},
			lookDetail(item)
			{
				let params = {
						type          : 3,
						uid           : this.uid,
						goods_id      : item.goods_id,
					};
				getFriend(params).then( res => {
					if(res.data.content.length)
						this.detailBox = true;
					this.activityDetatil = res.data;
				})
			}
		}
	}
</script>

<style lang="less">
	.lottery
	{
		ul
		{
			li
			{
				border-bottom: 1px solid #e5e5e5;
				color: #535353;
				background: #fff;
				img
				{
					width: 210/28rem;
					height: 225/28rem;
					object-fit: cover;
					border-radius: 4px;
					display: block;
				}
				.list-mid
				{
					p
					{
						color: #333;
					}
					.list-mid-pirce
					{
						strong
						{
							color: #ff0036;
						}
					}
					.list-mid-bottom
					{
						button
						{
							background: #ff0036;
							width: 180/28rem;
							height: 60/28rem;
							text-align: center;
							line-height: 60/28rem;
							border-radius: 8/28rem;
						}
					}
				}

			}
		}
		.footer
		{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 9;
			background: #fff;
			height: 125/28rem;
			border-top: 1px solid #e5e5e5;
			.on
			{
				color:#ff0036;
			}
			button{
				height: 100%;
				i
				{
					vertical-align: middle;
					margin-right: 20/28rem;
				}
			}
		}
		.my-lotterty-box
		{
			z-index: 99;
			position: fixed;
			top: 50%;
			left: 50%;
			transform:translate(-50%,-50%);
			background: rgba(0,0,0,.5);
			width: 100%;
			height: 100%;
			.my-lotterty
			{
				background: #fff;
				width: 80%;
				border-radius: 8px;
				position: relative;
				.status-img
				{
					width: 132/28rem;
					height: 128/28rem;
					position: absolute;
					top: 30/28rem;
					right: 30/28rem;
					z-index: 9;
					img
					{
						width: 100%;
						height: 100%;
						display: block;
						object-fit: cover;
					}
				}
				ul
				{
					overflow-y: scroll;
					height: 500/28rem;
					img
					{
						width: 80/28rem;
						height: 80/28rem;
						border-radius: 50%;
						object-fit: cover;
					}
				}
				i
				{
					position: absolute;
					top: -20/28rem;
					right: -20/28rem;
					background: #e5e5e5;
					font-size: 30/28rem;
					width: 54/28rem;
					height: 54/28rem;
					text-align: center;
					line-height: 54/28rem;
					border-radius: 50%;
					color: #666;
				}
				h2
				{
					border-bottom: 1px solid #e5e5e5;
					text-align: center;
				}
				
			}
		}
		.placeholder
		{
			height: 130/28rem;
			display: block;
			width: 100%;
		}
	}
</style>